<template>
  <div style="height: 100%">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-row span="24" style="height:100%">
      <el-col :span="5" style="height:100%">
        <el-tree :data="menuTreeData"
                 :props="treeProps"
                 :auto-expand-parent="true"
                 :accordion="true"
                 style="border-right: solid 1px #e6e6e6;margin-top: 20px;height: 80%"
                 :highlight-current="true"
                 @node-click="handleNodeClick">

        </el-tree>
      </el-col>
      <el-col :span="19">
        <div class="handle-box">
          <el-button type="text" class="mr10" size="small" @click="addOrUpdate('addFirst')"
                     v-show="menuTreeData===undefined || menuTreeData===null" round>
            <i class="el-icon-plus"> 添加首节点</i>
          </el-button>
          <el-button type="text" class="mr10" size="small" @click="addOrUpdate('addNode')"
                     v-show="menuTreeData!==undefined || menuTreeData!==null" :disabled="addAble" round>
            <i class="el-icon-plus"> 添加</i>
          </el-button>
        </div>
        <el-table
          :data="page.list"
          stripe
          :height=600
          style="width: 100%">
          <el-table-column
            header-align="center"
            prop="menuname"
            label="名称">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="menuywname"
            label="英文名称">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="menupath"
            label="路径">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="icon"
            label="图标">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="isleaf"
            label="是否子节点">
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="odr"
            label="排序">
          </el-table-column>
          <el-table-column
            header-align="center"
            label="操作">
            <template scope="scope">
              <el-button icon="el-icon-edit" type="text" @click="addOrUpdate('update',scope.row)">编辑</el-button>
              <el-button type="text" style="color: #FA5555" icon="el-icon-delete" @click="deleteMneu(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.pageNum"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes:="[10, 20, 30,40, 50,100]"
            :total="page.total">
          </el-pagination>
        </div>

        <el-dialog
          title="编辑菜单信息"
          :visible.sync="centerDialogVisible"
          width="30%"
          :before-close="dailogClose"
          center>
          <el-form :model="menu" :rules="rules" ref="menu" label-width="100px" class="demo-ruleForm">
            <el-form-item v-show="actionFlag==='addNode'" label="上级菜单">
              <el-input v-model="currentSelecte.menuname+' ( '+currentSelecte.menupath+' )'"
                        :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuname">
              <el-input v-model="menu.menuname"></el-input>
            </el-form-item>
            <el-form-item label="英文名称" prop="menuywname">
              <el-input v-model="menu.menuywname"></el-input>
            </el-form-item>
            <el-form-item label="路径" prop="menupath">
              <el-input v-model="menu.menupath"></el-input>
            </el-form-item>
            <el-form-item label="图标">
              <el-input v-model="menu.icon"></el-input>
            </el-form-item>
            <el-form-item label="是否子节点">
              <el-switch
                v-model="menu.isleaf"
                active-text="是"
                inactive-text="否"
                :active-value="true"
                :inactive-value="false"
                node-key="id"
                :disabled="actionFlag!=='addFirst'"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
            <el-form-item label="排序" prop="odr">
              <el-input v-model.number="menu.odr"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="dailogClose">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import common from '../../../common/constant.js'
  import ElCol from "element-ui/packages/col/src/col";
  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button";
  export default {
    components: {
      ElButton,
      ElCol
    },
    data() {
      return {
        actionFlag: 'addNode',
        centerDialogVisible: false,
        currentNodeKey: [],
        menuTreeData: [],
        currentSelecte: {
          id: 0,
          menuname: '',
          menuywname: '',
          menupath: '',
          isleaf: true,
          prentid: null,
          odr: 0,
          deleted: 0
        },
        menu: {
          id: 0,
          menuname: '',
          menuywname: '',
          menupath: '',
          isleaf: true,
          prentid: null,
          odr: 0,
          deleted: 0,
          icon: ''
        },
        addAble: true,// 添加按鈕默認不允許點擊
        treeProps: {
          children: 'child',
          label: 'menuname',
        },
        page: {
          pageNum: 1,
          pageSize: 10,
          size: 2,
          orderBy: null,
          startRow: 3,
          endRow: 4,
          total: 4,
          pages: 2,
          list: [],
          firstPage: 1,
          prePage: 1,
          nextPage: 0,
          lastPage: 2,
          isFirstPage: false,
          isLastPage: true,
          hasPreviousPage: true,
          hasNextPage: false,
          navigatePages: 8,
          navigatepageNums: [
            1,
            2
          ]
        },
        tableData: [],
        rules: {
          menuname: [
            {required: true, message: '请填菜单名称', trigger: 'blur'},
            {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
          ],
          menuywname: [
            {required: true, message: '请填英文名称', trigger: 'blur'},
            {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
          ],
          menupath: [
            {required: true, message: '请填写菜单路径', trigger: 'blur'},
            {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
          ],
          odr: [
            {type: 'number', message: '排序值必须为数字值', trigger: 'change'}
          ]
        }
      }
    },
    created: function () {
      this.initTree()
    },
    methods: {
      handleSizeChange(value){
        this.page.pageSize = value
        this.query()
      },
      handleCurrentChange(val) {
        let self = this
        self.page.currentPage = val
        self.query()
      },
      handleNodeClick(data) {
        let self = this
        self.currentSelecte = data
        self.queryByParentId(data.id)
        self.addAble = false
      },

      addOrUpdate(flag, row){
        let self = this
        self.actionFlag = flag
        if (flag === 'addNode') {
          // 添加子节点
          self.menu.isleaf = true
        } else if (flag === 'addFirst') {
          //添加首节点
          self.menu.isleaf = false
        } else {
          //修改操作
          self.menu = row
        }
        self.centerDialogVisible = true
      },
      dailogClose(){
        this.centerDialogVisible = false
        this.$refs['menu'].resetFields()
        this.menu = {
          id: 0,
          menuname: '',
          menuywname: '',
          menupath: '',
          isleaf: true,
          prentid: null,
          odr: 0,
          deleted: 0,
          icon: ''
        }
      },
      save(){
        let self = this
        self.$refs['menu'].validate((valid) => {
          if (valid) {
            if (self.actionFlag !== 'update') {
              // 添加操作
              self.menu.prentid = self.currentSelecte.id
            }
            self.$http.post('/api/menu/save', self.menu)
              .then((response) => {
                let responseData = response.data
                if (responseData.flag === common.respons.seccuss) {
                  self.message_ok('编辑菜单成功鸟！')
                  self.centerDialogVisible = false
                  self.queryByParentId(self.currentSelecte.id)
                  self.initTree()
                  self.currentNodeKey = self.currentSelecte.id
                } else {
                  self.message_error()
                }
              })
              .catch(function (response) {
                self.message_error()
              })

          } else {
            return false
          }
        })
      },
      deleteMneu(row){
        this.$confirm('删除后不可恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      queryByParentId(parentId){
        let self = this
        self.$http.post('/api/menu', {
          'prentid': parentId,
          'pageSize': self.page.pageSize,
          'pageNum': self.page.pageNum
        })
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.page = responseData.pageData
            } else {
              self.message_error()
            }
          })
          .catch(function (response) {
            self.message_error()
          })
      },
      initTree(){
        let self = this
        self.$http.get('/api/menu')
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.menuTreeData = responseData.dataList
              self.page.list = responseData.dataList
            } else {
              self.message_error()
            }
          })
          .catch(function (response) {
            self.message_error()
          })
      },
      message_error(message) {
        this.$notify.error({
          title: '错误',
          message: message === undefined ? '操作失败' : message
        });
      },
      message_ok(message) {
        this.$notify({
          title: '成功',
          message: message === undefined ? '操作成功' : message,
          type: 'success'
        });
      }
    }
  };
</script>
